<template>
  <div class="jc_operationImage">
    <!-- 预览图片组 -->
    <div class="showImgs" v-for="(item,index) in imgSrcArr">
      <img :src="item.src">
      <span>
        <a :href="item.src" download="下载"><img src="../../assets/icon/icon_download.png" alt=""></a>
        <i @click="deleteImgs(index)">X</i>
      </span>
    </div>
    <!-- 添加图片 -->
    <div class="addImgs">
      <span style="" @click="triggerSpan">+</span>
      <input type="file" @change="addImage" id="file" hidden>
    </div>
    <!-- 上传图片 -->
    <!--<button>上传</button>-->
  </div>
</template>
<script>

  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";


  export default {
    props: {

    },
    components: {ElButton},
    data() {
      return {
        imgSrcArr: [],
      }

    },
    computed: {

    },
    created() {



    },
    methods: {
      triggerSpan() {
        $('#file').click();
      },
      addImage() {
        var file = $('#file')[0].files[0];
        //不同浏览器下的路径不同
        function getObjectURL(file) {
          var url;
          if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
          } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
          } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
          }
          return url;
        }
        this.imgSrcArr.push({src: getObjectURL(file)});
      },
      deleteImgs(index) {
         this.imgSrcArr.splice(index, 1);
          //清空input中的值
          var obj = document.getElementById('file') ;
          obj.value="";
      },
    },
    watch: {
      /*value(v) {
      },
      innerValue(v) {

      }*/
    }
  }
</script>
